<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<script type="text/x-template" id="template-questions-class">
    <div class="col-md-12">
        <table class="table table-responsive table-striped table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>{{item.class_id}}</td>
                <td><input v-model="item.class_name" placeholder="输入名称..."></td>
                <td><input v-model="item.class_sort"></td>
                <td>
                    <a class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                    <a class="btn btn-danger btn-xs" @click="del(item,index)">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="100">
                    <a class="btn btn-default" @click="getList">刷新</a>
                    <a class="btn btn-info" @click="add">添加</a>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</script>
<script>
    Vue.component('questions-class', {
        template: '#template-questions-class',
        props: {
            parent_id: {
                require: true,
                default: 0
            }
        },
        data: function () {
            return {
                list: []
            }
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                if (!this.parent_id) return;
                ajax({
                    uri: '/exam/class_list',
                    data: {parent: this.parent_id},
                    success: function(resp){
                        console.log(resp);
                        this.list = resp.data;
                    }.bind(this)
                });
            },
            add: function () {
                this.list.push({class_parent: this.parent_id,class_sort: 255})
            },
            save: function (item) {
                ajax({
                    uri: '/exam/class_save',
                    data: item,
                    success: function(resp){
                        console.log(resp);
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item,index) {
                if (!confirm("确定删除吗？")) return;
                if (!item.class_id) {
                    this.list.splice(index,1);
                    return;
                }
                ajax({
                    uri: '/exam/class_del',
                    data: {id: item.class_id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            }
        },
        watch: {
            'parent_id': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>

<!-- Main content -->
<section class="content" id="questions-class-app">

    <div class="row" v-show="0 == parent_id">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{item.class_id}}</td>
                    <td><input v-model="item.class_name" placeholder="输入名称..."></td>
                    <td><input v-model="item.class_sort"></td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                        <a v-if="item.class_id > 0" class="btn btn-info btn-xs" @click="getChildren(item)">子分类</a>
                        <a class="btn btn-danger btn-xs" @click="del(item,index)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-default" @click="getList">刷新</a>
                        <a class="btn btn-info" @click="add">添加</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="parent_id">
        <div class="col-md-12">
            <a class="btn btn-warning" @click="parent_id = 0">返回</a>
        </div>
        <questions-class :parent_id="parent_id"></questions-class>
    </div>

</section>
<!-- /.content -->

<script>
    var questions_class_app = new Vue({
        el: '#questions-class-app',
        data: {
            list: [],
            parent_id: 0
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function (parent = 0, cb) {
                ajax({
                    uri: '/exam/class_list',
                    data: {parent: parent},
                    success: function(resp){
                        if (cb) cb(resp.data);
                        else  this.list = resp.data;
                    }.bind(this)
                });
            },
            add: function () {
                this.list.push({class_sort: 255})
            },
            save: function (item) {
                ajax({
                    uri: '/exam/class_save',
                    data: item,
                    success: function(resp){
                        console.log(resp);
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item,index) {
                if (!confirm("确定删除吗？")) return;
                if (!item.class_id) {
                    this.list.splice(index,1);
                    return;
                }
                ajax({
                    uri: '/exam/class_del',
                    data: {id: item.class_id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            getChildren: function (item) {
                this.parent_id = item.class_id;
            }
        },
        watch: {
        }
    })
</script>